// rem适配: 修改根标签文字大小
(function () {
  var html = document.documentElement;
  function setFont() {
    // 获取当前根标签的视口宽度
    var clientWidth = html.clientWidth;
    if (clientWidth <= 1024) {
      clientWidth = 1024;
    }
    if (clientWidth >= 1920) {
      clientWidth = 1920;
    }

    // 计算根标签文字大小
    var htmlSize = clientWidth / 80 + "px";

    // 将计算的结果赋值给根标签
    html.style.fontSize = htmlSize;
  }
  setFont();

  window.onresize = function () {
    setFont();
  };

})();


//功能1: 动态克隆li标签
(function () {
  var li = document.querySelector(".content .item li");
  var ul = document.querySelector(".content .item ul");
  var li2 = document.querySelector(".content .item:nth-child(2) li");
  var ul2 = document.querySelector(".content .item:nth-child(2) ul");
  for (var i = 1; i <= 10; i++) {
    var cloneLi = li.cloneNode(true);
    ul.appendChild(cloneLi);
    ul2.appendChild(li2.cloneNode(true));
  }
})();

// 功能2: 点击标题实现切换效果
(function () {
  var abtns = document.querySelectorAll(".top_two_left .title h4");
  var items = document.querySelectorAll(".content .item");
  abtns.forEach(function (item, index) {
    item.onclick = function () {
      document.querySelector(".active").classList.remove("active");
      this.classList.add("active");
      for (var i = 0; i < items.length; i++) {
        items[i].style.display = 'none';
      }
      items[index].style.display = 'block';
    };
  });
})();


// 功能3: 显示饼状图
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.leftPie'));

  // 指定图表的配置项和数据
  var option = {
    // 鼠标悬停时候的效果
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}'
    },

    series: [
      {
        name: 'Area Mode',
        type: 'pie',
        //改变圆的半径大小
        radius: ["10%", "70%"],
        //修改当前图的位置
        center: ['50%', '50%'],
        // 修改当前图形的统计数据方式
        roseType: 'area',
        // 设置每一个数据对应的样式
        itemStyle: {
          borderRadius: 5
        },
        data: [
          { value: 20, name: '云南', itemStyle: { color: "#1d9dff" } },
          { value: 26, name: '北京', itemStyle: { color: "#006cff" } },
          { value: 24, name: '山东', itemStyle: { color: "#60cda0" } },
          { value: 25, name: '河北', itemStyle: { color: "#ed8884" } },
          { value: 20, name: '江苏', itemStyle: { color: "#ff9f7f" } },
          { value: 25, name: '浙江', itemStyle: { color: "#0096ff" } },
          { value: 30, name: '四川', itemStyle: { color: "#9fe6b8" } },
          { value: 42, name: '湖北', itemStyle: { color: "#32c5e9" } }
        ],


        // 视觉引导线
        // labelLine: {
        //     //连接饼状态连接线
        //     length : 50,
        //     // 链接文字视觉引导线
        //     length2: 10 
        // }

      }
    ],
    color: ["#1d9dff","#006cff","#60cda0","#ed8884","#ff9f7f","#0096ff","#9fe6b8","#32c5e9"]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  var myData = [
    { value: 93, name: "北京" },
    { value: 21, name: "上海" },
    { value: 75, name: "广州" },
    { value: 46, name: "深圳" },
    { value: 88, name: "成都" },
    { value: 34, name: "重庆" },
    { value: 67, name: "杭州" },
    { value: 52, name: "南京" },
    { value: 19, name: "武汉" },
    { value: 81, name: "西安" },
    { value: 43, name: "天津" },
    { value: 79, name: "苏州" },
    { value: 31, name: "大连" },
    { value: 64, name: "青岛" },
    { value: 57, name: "厦门" },
    { value: 96, name: "长沙" },
    { value: 28, name: "沈阳" },
    { value: 85, name: "哈尔滨" },
    { value: 40, name: "郑州" },
    { value: 72, name: "济南" },
    { value: 36, name: "石家庄" },
    { value: 99, name: "乌鲁木齐" },
    { value: 24, name: "呼和浩特" },
    { value: 60, name: "南宁" },
    { value: 54, name: "福州" },
    { value: 87, name: "昆明" },
    { value: 42, name: "贵阳" },
    { value: 78, name: "兰州" },
    { value: 30, name: "西宁" },
    { value: 90, name: "银川" },
    { value: 26, name: "海口" },
    { value: 63, name: "台北" },
    { value: 51, name: "香港" },
    { value: 84, name: "澳门" },
    { value: 38, name: "宁波" },
    { value: 76, name: "无锡" },
    { value: 45, name: "温州" },
    { value: 25, name: '浙江'},
    { value: 30, name: '四川'},
    { value: 42, name: '湖北'}
  ];
  
  var pageSize = 8;
  var start = 0;
  var pageIndex = 0;
  var end = 8;

  // start = pageSize * pageIndex -pageSize   
  // end = pageSize * pageIndex

  setInterval(function() {
    if(pageIndex == 5) {
      pageIndex = 0;
    }
    pageIndex++;
    start = pageSize * pageIndex -pageSize;
    end = pageSize * pageIndex;
    option.series[0].data = myData.slice(start,end);
    myChart.setOption(option);
  }, 4000);

})();

// 功能4: 柱状图配置
(function () {
  var myChart = echarts.init(document.querySelector('.leftBar'));

  var mysty1 = {
    color: "#254065"
  };
  var option = {
    // 鼠标悬停时候的效果
    tooltip: {
      // 悬停样式
      trigger: 'item',
    },
    // 网格, 修改整体图形大小
    grid: {
      // 修改当前网格在4个方向的距离
      top: '3%',
      right: '3%',
      bottom: '3%',
      left: '0%',
      containLabel: true,
      // 配置是否要显示网格边框效果
      show: true,
      // 修改边框颜色
      borderColor: "rgba(0, 240, 255, 0.3)"
    },
    // x轴
    xAxis: [
      {
        type: 'category',
        // 数据
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        axisTick: {
          alignWithLabel: true,
          show: false
        },
        // 修改当前坐标轴上的文字样式
        axisLabel: {
          color: "#4c9bfd"
        },
        // axisTick: {
        //    show: false
        // }
        // 是否显示刻度线
        //   axisTick: {
        //     show: false
        //  }
      }
    ],
    // Y轴
    yAxis: [
      {
        type: 'value',
        // 修改当前坐标轴上的文字样式
        axisLabel: {
          color: "#4c9bfd"
        },

        // 数据分割线
        splitLine: {
          lineStyle: {
              // 设置数据分割线颜色
              color:  'rgba(0, 240, 255, 0.3)'
          }
        },
        // 是否显示刻度线
        axisTick: {
           show: false
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '60%',
        //data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]
        data: [{
          value: 2100, 
        }, {
          value: 1900,
        }, {
          value: 1700, 
        }, {
          value: 1560, 
        },{value: 1400, },
        { value: 1200, itemStyle: mysty1 }, { value: 1200, itemStyle: mysty1 }, { value: 1200, itemStyle: mysty1 }, {
          value: 900, 
        }, {
          value: 750, 
        }, {
          value: 600, 
        }, {
          value: 480,
        }, {
          value: 240, 
        }],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#00fdfa' // 0% 处的颜色
            }, {
              offset: 1, color: '#0065cf' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ]
  };
  myChart.setOption(option);
})();


// 功能5: 点击右侧顶部标题切换
(function(){
    var  abtns = document.querySelectorAll(".right_top1 a");
    var items = document.querySelectorAll(".right_top1 .content .item");
    var right_top1  = document.querySelector(".right_top1");
    var timeID;
    var index = 0;
    abtns.forEach(function(item, myindex){
         item.onclick = function() {
             document.querySelector(".right_top1 .active").classList.remove("active");
             this.className = "active";
             for(var i  = 0; i < items.length; i++) {
                items[i].style.opacity = 0;
             }
             items[myindex].style.opacity = 1;

             index = myindex;
         };
    });
  // 自动切换效果
  function autoplay() {
    timeID = setInterval(function(){
        index++;
        if(index == abtns.length) { 
            index = 0;
        }
        abtns[index].click();
    }, 3000);
  }
   autoplay();


    // 鼠标进入
    right_top1.onmouseenter = function() {
         clearInterval(timeID);
    };

    // 鼠标离开
    right_top1.onmouseleave = function() {
      autoplay();
    };
   
})();

// 功能6: 右侧折线统计图效果
(function() {
    var myData = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    };
    var myChart = echarts.init(document.querySelector('.rightBox_lineBox'));
    var option = {
      // 图例
      legend: {
        // 设置图例文字样式
        textStyle: {
           color:"#4c9bfd"
        },
        right: "10%"
      },
      tooltip: {
        trigger: 'axis',
        showContent: false
      },
      xAxis: { 
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

        // 设置坐标轴轴线
        axisLine: {
           show: false
        },
        //设置刻度线
        axisTick: {
            show: false
        },
        //设置坐标轴文字颜色
        axisLabel: {
          color: "#4c9bfd"
       }
      },
      yAxis: { 
          type: "value",
          splitLine: {
            lineStyle: {
                color:'#012f4a'
            }
          },
          // 设置坐标轴轴线
          axisLine: {
            show: false
          },
          //设置刻度线
          axisTick: {
              show: false
          },
          // 设置坐标轴文字颜色
          axisLabel: {
              color: "#4c9bfd"
          }

      },
      //调整网格大小及位置
      grid: { 
        top: '10%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 显示边框
        show: true,
        // 修改边框颜色
        borderColor: '#012f4a',// 边框颜色

        // 文字溢出网格正常显示
        containLabel: true
      },
      series: [
        {
          type: 'line',
          //设置当前折线连接处效果,true代表平滑过渡
          smooth: true,
          name: "预期销售",
          data: [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
          //设置线样式
          lineStyle: {
            color: "#00f2f1"
          }
        },
        {
          type: 'line',
          smooth: true,
          name: "实际销售",
          data: [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
          //设置线样式
          lineStyle: {
            color: "#eb3f35"
          }
        }
      ]
    };
    myChart.setOption(option);

    // 点击
    var btns = document.querySelectorAll(".right_top2 .title a");
    btns.forEach(function(item){
         item.onclick = function() {
            document.querySelector(".right_top2 .title .active").classList.remove("active");
            this.className = "active";

            var dt = this.dataset.myname;
            option.series[0].data = myData[dt][0];
            option.series[1].data = myData[dt][1];
            myChart.setOption(option);
         };
    });
    var myindex = 0;
    setInterval(function(){
      myindex++;
      if(myindex == 4) {
        myindex = 0;
     }
      btns[myindex].click();
    }, 4000);

})();


// 功能7: 销售进度统计效果
(function(){
    var myChart = echarts.init(document.querySelector('.priBox'));
    var option = {
      series: [
        {
          name: 'Access From',
          type: 'pie',
          //修改半径大小
          radius: ['130%', '150%'],
          //修改位置
          center: ['50%', '90%'],
          // adjust the start and end angle
          startAngle: 0,
          endAngle: 360,
          data: [
            { value: 400, name: 'Search Engine', itemStyle: {color: "transparent" }},
            { value: 200, name: 'Direct' },
            { value: 200, name: 'Email' },
          ],
          // 隐藏视觉引导线
          labelLine: {
             show: false
          },
          label: {
             show: false
          },
          // 鼠标悬停禁止放大
          hoverOffset: 0
        }
      ]
    };
    myChart.setOption(option);
})();


//功能8: 显示中国地图
(function(){
  var chinaGeoCoordMap = {
		'黑龙江': [127.9688, 45.368],
		'内蒙古': [110.3467, 41.4899],
		"吉林": [125.8154, 44.2584],
		'北京市': [116.4551, 40.2539],
		"辽宁大连御码": [121.618622, 38.91459],
		"河北": [114.4995, 38.1006],
		"天津": [117.4219, 39.4189],
		"山西": [112.3352, 37.9413],
		"陕西": [109.1162, 34.2004],
		"甘肃": [103.5901, 36.3043],
		"宁夏": [106.3586, 38.1775],
		"青海": [101.4038, 36.8207],
		"新疆": [87.9236, 43.5883],
		"西藏": [91.11, 29.97],
		"四川": [103.9526, 30.7617],
		"重庆": [108.384366, 30.439702],
		"山东": [117.1582, 36.8701],
		"河南": [113.4668, 34.6234],
		"江苏": [118.8062, 31.9208],
		"安徽": [117.29, 32.0581],
		"湖北": [114.3896, 30.6628],
		"浙江": [119.5313, 29.8773],
		"福建": [119.4543, 25.9222],
		"江西": [116.0046, 28.6633],
		"湖南": [113.0823, 28.2568],
		"贵州": [106.6992, 26.7682],
		"云南": [102.9199, 25.4663],
		"广东": [113.12244, 23.009505],
		"广西": [108.479, 23.1152],
		"海南": [110.3893, 19.8516],
		'上海': [121.4648, 31.2891]
	};
	var chinaDatas = [
		[{
			name: '黑龙江',
			value: 0
		}],	[{
			name: '内蒙古',
			value: 0
		}],	[{
			name: '吉林',
			value: 0
		}],	[{
			name: '辽宁大连御码',
			value: 0
		}],[{
      name: '河北',
      value:0
    }],[{
      name: '山东',
      value:0
    }],[{
      name: '上海',
      value:0
    }],
	];

	var convertData = function(data) {
		var res = [];
		for(var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = chinaGeoCoordMap[dataItem[0].name];
			var toCoord = [121.618622, 38.91459];
			if(fromCoord && toCoord) {
				res.push([{
					coord: fromCoord,
					value: dataItem[0].value
				}, {
					coord: toCoord,
				}]);
			}
		}
		return res;
	};
	var series = [];
	[['辽宁大连御码', chinaDatas]].forEach(function(item, i) {
		series.push({
				type: 'lines',
				zlevel: 2,
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
					symbol: 'arrow', //箭头图标
					symbolSize: 5, //图标大小
				},
				lineStyle: {
					normal: {
						width: 1, //尾迹线条宽度
						opacity: 1, //尾迹线条透明度
						curveness: .3 //尾迹线条曲直度
					}
				},
				data: convertData(item[1])
			}, {
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: { //涟漪特效
					period: 4, //动画时间，值越小速度越快
					brushType: 'stroke', //波纹绘制方式 stroke, fill
					scale: 4 //波纹圆环最大限制，值越大波纹越大
				},
				label: {
					normal: {
						show: true,
						position: 'right', //显示位置
						offset: [5, 0], //偏移设置
						formatter: function(params){//圆环显示文字
							return params.data.name;
						},
						fontSize: 13
					},
					emphasis: {
						show: true
					}
				},
				symbol: 'circle',
				symbolSize: function(val) {
					return 5+ val[2] * 5; //圆环大小
				},
				itemStyle: {
					normal: {
						show: false,
						color: '#f00'
					}
				},
				data: item[1].map(function(dataItem) {
					return {
						name: dataItem[0].name,
						value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
					};
				}),
			},
			//被攻击点
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					brushType: 'stroke',
					scale: 4
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						color: '#0f0',
						formatter: '{b}',
						textStyle: {
							color: "#0f0"
						}
					},
					emphasis: {
						show: true,
						color: "#f60"
					}
				},
				symbol: 'pin',
				symbolSize: 30,
				data: [{
					// name: item[0],
					value: chinaGeoCoordMap[item[0]].concat([10]),
				}],
			}
		);
	});
    var myChart = echarts.init(document.querySelector('.map'));
    var option = {
      // 修改背景颜色
      backgroundColor:"rgba(255,255,255,0.1)",
      visualMap: { //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        // 控制鼠标中键滑动改变的大小值
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
       //是否允许缩放
        roam: true, 
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };
    myChart.setOption(option);
})();





